<template>
  <div class="container">
    <a-card class="general-card" title="派单列表">
      <ProTable
        :columns="columns"
        :request="fetchDispatchList"
        row-key="id"
        :action-ref="setActionRef"
        :pagination="true"
      >
        <template #operations="{ record }">
          <a-button type="text" @click="openDispatchModal(record)">派单</a-button>
          <a-button type="text" @click="handleCancelDispatch(record)">取消派单</a-button>
          <a-button type="text" @click="handleEndService(record)">结束服务</a-button>
        </template>
      </ProTable>
    </a-card>

    <!-- 派单弹出窗口 -->
    <a-modal
      v-model:visible="dispatchModalVisible"
      title="选择服务人员"
      @ok="handleDispatchConfirm"
      @cancel="handleDispatchCancel"
    >
      <a-select
        v-model:value="selectedUser"
        style="width: 100%"
        placeholder="请选择服务人员"
        :options="userOptions"
        @change="handleUserChange"
      ></a-select>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getDispatchList, saveServiceUser, deleteServiceUser, addDemandAbnormal, getServiceUsers } from "@/api/dispatch";
import Message from "@arco-design/web-vue/es/message";

const columns = [
  { title: '需求单ID', dataIndex: 'id', key: 'id' },
  { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo' },
  { title: '服务产品名称', dataIndex: 'serviceProductName', key: 'serviceProductName' },
  { title: '服务类型', dataIndex: 'productType', key: 'productType',
    valueEnum:{
      1: { text: '保洁' },
      2: { text: '搬家' },
      3: { text: '保养' },
      4: { text: '维修' },
    }
  },
  { title: '服务地址', dataIndex: 'contactAddress', key: 'contactAddress' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '操作', dataIndex: 'operations', slotName: 'operations' ,hideInSearch:true}
];

const actionRef = ref();
const dispatchModalVisible = ref(false);
const selectedUser = ref(null);
const currentRecord = ref(null);
const userOptions = ref([]);

const fetchDispatchList = async (params) => {
  const response = await getDispatchList({page: params.current, size: params.pageSize,condition:{}});

  return {
    success: true,
    data: response.list,
    total: response.total
  };
};

const setActionRef = (ref) => {
  actionRef.value = ref;
};

const openDispatchModal = async (record) => {
  currentRecord.value = record;
  dispatchModalVisible.value = true;

  // 获取服务人员列表
  // const users = await getServiceUsers();
  const users = [
  { "id": 1, "name": "张三" },
  { "id": 2, "name": "李四" },
  { "id": 3, "name": "王五" }
]

  userOptions.value = users.map(user => ({
    value: user.id,
    label: user.name
  }));
};

const handleDispatchConfirm = async () => {
  if (!selectedUser.value) {
    Message.error("请选择服务人员");
    return;
  }

  try {
    const response = await saveServiceUser({ demandId: currentRecord.value.id, serviceUserList: [selectedUser.value] });
    if (response.success) {
      Message.success("派单成功");
      dispatchModalVisible.value = false;
      actionRef.value.reload();
    } else {
      Message.error("派单失败");
    }
  } catch (error) {
    Message.error("派单失败");
  }
};

const handleDispatchCancel = () => {
  dispatchModalVisible.value = false;
};

const handleUserChange = (value) => {
  selectedUser.value = value;
};

const handleCancelDispatch = async (record) => {
  try {
    const response = await deleteServiceUser({ demandId: record.id });
    console.log(response,'--res')
    if (response) {
      Message.success("取消派单成功");
      actionRef.value.reload();
    } else {
      Message.error("取消派单失败");
    }
  } catch (error) {
    Message.error("取消派单失败");
  }
};

const handleEndService = async (record) => {
  try {
    const response = await addDemandAbnormal({
      demandId: record.id,
      endReason: "服务结束",
      afterSalesReason: "无",
      file: "xxx.jpg"
    });
    if (response.success) {
      Message.success("结束服务成功");
      actionRef.value.reload();
    } else {
      Message.error("结束服务失败");
    }
  } catch (error) {
    Message.error("结束服务失败");
  }
};
</script>

<style scoped lang="less">
.container {
  padding: 20px;
}
</style>